import './index.less';

import React from 'react';
import { inject, observer} from 'mobx-react';
import { toJS } from 'mobx';

import { Modal, Row, Col, Button, Popover, message, Spin, Checkbox } from 'antd';
import {
    WeaTools,
    WeaRightMenu,
    WeaBrowser,
    WeaLocaleProvider,
    WeaTop,
    WeaTableEditable,
    WeaDialogFooter,
    WeaDialog,
    WeaPopoverHrm,
    WeaTable,
} from 'ecCom';

const getLabel = WeaLocaleProvider.getLabel;

@observer
export default class ForwardBack extends React.Component {

    selectRow = [];

	constructor(props) {
		super(props);
		this.getDialogBtns;
		this.getReceiverNamesCom;
		this.getOperaterNamesCom;
		this.state = {
            columns :[],
            //...每一列折叠控制
        };
	}

    componentDidMount(){

        const {wfForwardBackStore} = this.props;
        wfForwardBackStore.initData();

        this.state.columns = [{
            title: <span>{getLabel(390214, `转发人`)}</span>,
            key: "operatorNames",
            dataIndex: "operatorNames",
            width: "25%"
        },{
            title: <span>{getLabel(390215, `接收人`)}</span>,
            key: "receiverNames",
            dataIndex: "receiverNames",
            width: "50%"
        },{
            title: <span>{getLabel(390524, `转发时间`)}</span>,
            key: "operateTime",
            dataIndex: "operateTime",
            width: "25%"
        }];
    }

	render() {
		const {wfForwardBackStore} = this.props;
		let {
            showForwardBack,
			loading,
            tableDatas=[],
		} = wfForwardBackStore;
        tableDatas = toJS(tableDatas);
        tableDatas.map((data)=>{

            const id = data.id;
            const show = !!this.state[id];
            data.receiverNames = this.getReceiverNamesCom(data.receiverNames,show,()=>{
                const statePara = {};
                statePara[`${id}`] = !show;
                this.setState(statePara);
            });
            data.operatorNames = this.getOperaterNamesCom(data.operatorNames);
        });

		return(
			<div>
                <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@i3138y`}
                    title={getLabel(390216,'可收回的转发操作')}
                    visible={showForwardBack}
                    onCancel = {this.doCancel}
                    draggable={true}
                    hasScroll={true}
                    style = {{width: 860, height: 460}}
                    icon = {'icon-coms-workflow'}
                    iconBgcolor = {'#0079DE'}
                    layout={jQuery('.wf-req')[0]}
                >
                    <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@2sw7be`}
                        datas={this.getRightMenu()}
                    >
                        <div className={'wf-forward-back'} >
                            <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@sh2yio`}
                                columns={this.state.columns}
                                dataSource={tableDatas}
                                rowSelection={this.rowSelection()}
                                pagination={false}
                            />
                        </div>
                        <WeaDialogFooter ecId={`${this && this.props && this.props.ecId || ''}_WeaDialogFooter@vntu2m`}
                            buttons={this.getDialogBtns(loading)}
                        />
                    </WeaRightMenu>
                </WeaDialog>
			</div>
		)
	}

    /**
     * 弹框底部按钮
     * @returns {*[]}
     */
    getDialogBtns = (loading) => {
        return [
            <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@0ig6qf@confirm`} type="primary" size="large" disabled={loading} onClick={this.doBack}>{getLabel(826,'确定')}</Button>,
            <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@xmyhxg@cancel`} type="ghost" size="large" disabled={loading} onClick={this.doCancel}>{getLabel(31129,'取消')}</Button>
        ];
    }

    /**
     * 右键菜单
     */
    getRightMenu = () => {

        const btns = [{
            key: "add",
            icon: <i className='icon-coms-complete'/>,
            content:getLabel(826,'确定'),
            onClick:this.doBack
        }];
        return btns;
    }

    /**
     * 选中事件
     * @param rowSelection
     * @returns {{}}
     */
    rowSelection = ()=>{
        return {
            onChange:(selectedRowKeys)=>{
                this.selectRow = selectedRowKeys;
            }
        };
    }

    /**
     * 确定
     */
    doBack = ()=>{
        const {wfForwardBackStore} = this.props;
        wfForwardBackStore.doBack(this.selectRow);
    }

    /**
     * 取消
     */
    doCancel = () =>  {
        const {wfForwardBackStore} = this.props;
        wfForwardBackStore.setShowForwardBack(false);
	}

    getReceiverNamesCom = (receiver = [], show, func)  => {
        let showList = (receiver.length <= 10 || show) ? receiver : receiver.slice(0,10);
        return (
            <div>
                <div className="browserDiv" dangerouslySetInnerHTML={{__html:showList.join(' ')} }>

                </div>
                {receiver.length > 9 &&
                    <span
                        className="iconSpan"
                        title={show ? getLabel(26985, '收起') : getLabel(20234, '显示全部')}
                        onClick={() => {
                            func && func();
                        }}
                    >
                        <em className={show ? "icon-coms-up" : "icon-coms-down"}></em>
                    </span>
                }
            </div>
        )
    }

    getOperaterNamesCom = (name) => {
        return (
            <div className="browserDiv" dangerouslySetInnerHTML={{__html:name} }></div>
        )
    }
}